<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LMS | Log in</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
</head>

<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href=""><b>图书与阅读管理系统 </b></a>
    </div>
    <div class="card">
        <div class="card-body login-card-body">
            <form action="" id="loginform" method="post">
                {% csrf_token  %}
              <div class="input-group mb-3">
                  <input type="text" id="username" class="form-control" placeholder="用户名">
                  <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-user"></span>
                    </div>
                  </div>
                </div>
              <div class="input-group mb-3">
                  <input type="password" id="password" class="form-control" placeholder="密码">
                  <div class="input-group-append">
                    <div class="input-group-text">
                      <span class="fas fa-lock"></span>
                    </div>
                  </div>
                </div>
              <div class="row">
                  <div class="col-12">
                    <input id="register" type="button" class="btn btn-primary btn-block" value="登录">
                  </div>
                </div>
              <div class="row">
                  <p></p>
              </div>
              <div class="row">
                  <div class="col-8">
                      <label for="agreeTerms" id="login_info"></label>
                  </div>
                  <p class="col-4">
                    <a href="../../basic/user_reg/1" class="text-center">注册用户</a>
                  </p>
              </div>
            </form>

        </div>
    <!-- /.login-card-body -->
    </div>
  </div>

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script>
    $("#register").click(function () {
        $.ajax({
            url: "/basic/ajax_login_data/", //后端请求地址
            type: "POST", //请求方式
            data: {//请求参数
                username: $("#username").val(),
                password: $("#password").val(),
                "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
            },
            //请求成功后操作
            success: function (data) {
              $("#login_info").html(data.msg)
              if(data.code==1000) {
                  window.location.href = "../../basic/index/";           // 登录成功，页面跳转到首页URL
              }
            },
            //请求失败后操作
            error: function (jqXHR, textStatus, err) {
                console.log(arguments);
            },
        })
    })
</script>
</body>
</html>